<%--
  Created by IntelliJ IDEA.
  User: KK
  Date: 2022/11/19
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="CSS/formatter.css" rel="stylesheet" type="text/css">
<html>
<head>
    <title>登录界面</title>
</head>
<body>
<center>
    <form action="LoginServlet" method="post">
        <table border="0px">
            <tr>
                <td colspan="2" style="text-align: center">用户登录</td>
            </tr>
            <tr>
                <td class="fontPosition">账号：</td>
                <td><input type="text" name="username" id="username" onblur="checkUsername()" value="admin"><span class="spanFont"></span></td>
                <td></td>
            </tr>
            <tr>
                <td class="fontPosition">密码：</td>
                <td><input type="password" name="password" id="password" onblur="checkPassword()" value="admin"><span class="spanFont"></span></td>
                <td></td>
            </tr>
            <tr>
                <td class="fontPosition">验证码：</td>
                <td><input type="text" style="width: 60px" name="verificationCode" id="verificationCode">
                    <img src="/verificationCodeServlet" onclick="reloadCode()" id="checkCode">
                    <a href="javaScript:void(0)" onclick="reloadCode()">看不清</a><span></span></td>
                <td></td>
            </tr>
            <tr>
                <td class="buttonPosition" colspan="3"><h8 style="color: red">${msg} </h8></td>
            </tr>
            <tr>
                <td class="fontPosition">角色：</td>
                <td><input type="radio" name="role" id="norRole">普通用户
                    <input type="radio" name="role" id="adminRole">管理员
                <td></td>
            </tr>
            <tr>
                <td colspan="2" class="buttonPosition"><input type="checkbox" name="rememberMe" id="rememberMe">记住密码
                <td></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: center"><input type="submit" value="登录" onclick="return checkForm()"> &nbsp; &nbsp;
                    <a href="register.jsp">注册</a></td>
                <td></td>
            </tr>
        </table>
    </form>
</center>
<script type="text/javascript">
    let username = document.getElementById("username");
    let password = document.getElementById("password");
    let verificationCode = document.getElementById("verificationCode");
    let msgWarn = document.getElementsByTagName("span");
    function checkForm() {
        if (username.value == "" || password.value == "") {
            alert("请输入用户名和密码")
            return false;
        } else {
            return true;
        }
    }

    function checkUsername() {
        let reg = /^[A-Za-z0-9]{5,20}$/;
        if (reg.test(username.value)) {
            msgWarn[0].style.color = "green";
            msgWarn[0].innerText = "√";
            return true;
        } else {
            msgWarn[0].style.color = "red";
            msgWarn[0].innerText = "用户名必须5-20位！且只能包含数字和字母";
            return false;
        }
    }

    function checkPassword() {
        let reg = /^[A-Za-z0-9！@#￥%*$&*{}?.。\|"‘’']{1,16}$/;
        if (reg.test(password.value)) {
            msgWarn[1].innerText = "";
        } else {
            msgWarn[1].style.color = "red";
            msgWarn[1].innerText = "密码必须为8-16位";
        }
    }

    //刷新验证码
    function reloadCode() {
        //因为生成验证码的图片是内存图片,第一次请求servlet中验证码时,servlet会根据请求执行生成一张验证码图片,缓存在内存中,同时响应给客户端
        //当浏览器第二次发送同样的请求给servlet时,servlet将第一次缓存验证码图片直接响应给客户端,不会重新执行Servlet
        //如果想让生成验证码的servlet每次都重新执行代码生成新的验证码,那么就需要发送请求url每次不同,url中参数每次不同
        document.getElementById("checkCode").src = "verificationCodeServlet?r=" + new Date();
    }
</script>
</body>
</html>
